
import { generateTimeArray } from "@/utils/common";
const xAxisData = generateTimeArray();

export const chartOption = {
  title: {
    text: '电压一致性',
    x: 'center',
    y: 'top',
    textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
      fontSize: 16,
      color: '#fff'
    },
    top: '10',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    top: '40',
    data: ["单体最低电压-电池组", "单体最高电压-电池组", "最大压差线"],
  },

  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  visualMap: [{
    type: "piecewise",
    orient: "horizontal",
    seriesIndex: 2,
    pieces: [
      { min: 0, max: 200, label: '安全（200以下）', color: "#d1ebcc" },
      { min: 200, max: 300, label: '告警（200～300）', color: "#fbe696" },
      { min: 300, label: '故障（300以上）', color: "#981d2b" },
    ],
    textStyle: {
      color: "#fff"
    },
    calculable: true,
    realtime: false,
    hoverLink: true,

    top: "350",
    left: "center",
  }],
  dataZoom: [
    {
      type: "slider",
      show: true,
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
      height: 13,
      bottom: "25",

    },
  ],
  grid: [
    {
      top: '80',
      right: '3%',
      bottom: '10%',
      left: '60',
      height: '35%'
    },
    {
      top: '380',
      right: '3%',
      bottom: '20',
      left: '60',
      height: '35%'
    },
  ],

  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: xAxisData,
      axisLabel: {
        formatter: (value) =>  //X轴的内容
        {

          let ret = ""; //拼接加\n返回的类目项
          let max = 10;  //每行显示的文字字数
          let val = value.length;  //X轴内容的文字字数
          let rowN = Math.ceil(val / max);  //需要换的行数
          if (rowN > 1)  //判断 如果字数大于2就换行
          {
            for (let i = 0; i < rowN; i++) {
              let temp = "";  //每次截取的字符串
              let start = i * max;  //开始截取的位置
              let end = start + max;  //结束截取的位置
              temp = value.substring(start, end) + "\n";
              ret += temp;  //最终的字符串
            }
            return ret;
          }
          else { return value }
        }
      }
    },
    {
      show: false,
      gridIndex: 1,
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: [],
      axisLabel: {
        formatter: (value) => {

          let ret = "";
          let max = 10;
          let val = value.length;
          let rowN = Math.ceil(val / max);
          if (rowN > 1) {
            for (let i = 0; i < rowN; i++) {
              let temp = "";
              let start = i * max;
              let end = start + max;
              temp = value.substring(start, end) + "\n";
              ret += temp;
            }
            return ret;
          }
          else { return value }
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "电压（mV）"
    },
    {
      gridIndex: 1,
      type: 'value'
    }
  ],
  series: [
    {
      name: '单体最低电压-电池组',
      data: [],
      type: 'line',
      symbol: 'circle',
      smooth: true,
      itemStyle: {
        color: '#9dffc7', //改变折线点的颜色
        lineStyle: {
          color: '#9dffc7' //改变折线颜色
        }
      },

      emphasis: {
        focus: 'series'
      },
    },//
    {
      name: '单体最高电压-电池组',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'circle',
      itemStyle: {
        color: '#ff6c76', //改变折线点的颜色
        lineStyle: {
          color: '#ff6c76' //改变折线颜色
        }
      },

      emphasis: {
        focus: 'series'
      },
    },
    {
      type: "bar",
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [],
      itemStyle: {
        color: "#4183fb"
      },
      markArea: {
        data: [
          [
            {
              yAxis: '0',
              itemStyle: {
                color: 'rgba(226,244,223,0.1)'
              },
            },
            {
              yAxis: '200'
            }
          ],
          [
            {
              yAxis: '200',
              itemStyle: {
                color: 'rgba(251, 233, 166, 0.1)'
              },
            },
            {
              yAxis: '300',
            }],
          [{
            yAxis: '300',
            itemStyle: {
              color: 'rgba(152, 29, 43, 0.1)'
            },
          },
          {
            yAxis: '100000',
          }],
        ]
      }
    },
  ]
};